<!--
描述：慕课模块-课程管理
开发人：zhaohang
开发日期：2019年11月7日
-->
<template lang="pug">
  keep-alive
    kalix-table(bizKey="moocClass" title='课程列表' ref="kalixTable"
    v-bind:tableFields="tableFields"
    v-bind:targetURL="moocClassURL"
    v-bind:bizDialog="moocClassDialog"
    v-bind:btnList="moocClassBtnList"
    v-bind:buttonPermissionPrefix="buttonPermissionPrefix"
    v-bind:toolbarBtnList="toolbarBtnList"
    v-bind:customRender="showMoocClassText"
    v-bind:jsonStr="jsonStr"
    bizSearch="moocClassSearch")
      template(slot="tableColumnSlot")
        el-table-column(prop="className" label="课程名称" align="center")
        el-table-column(prop="teacher" label="教师名称" align="center")
        el-table-column(prop="openTime" label="开课日期" align="center")
          template(slot-scope="scope")
            span {{dataFormat(scope.row.openTime)}}
        el-table-column(prop="classCover" label="课程封面" align="center")
          template(slot-scope="scope")
            img(:src="scope.row.classCover" width="100px" readonly="readonly")
        el-table-column(prop="department" label="所属院系" align="center"  )
        el-table-column(prop="speciality" label="所属专业" align="center")
        el-table-column(prop="classIntroduce" label="课程简介" align="center")
          template(slot-scope="scope")
            span {{scope.row.classIntroduce | ellipsis}}
        el-table-column(prop="teacherIntroduce" label="教师简介" align="center")
          template(slot-scope="scope")
            span {{scope.row.teacherIntroduce | ellipsis}}
        el-table-column(prop="classType" label="课程类别" align="center")
        el-table-column(prop="charge" label="是否收费" align="center")
        el-table-column(prop="appraise" label="是否评价" align="center")
        el-table-column(prop="recommend" label="是否推荐" align="center")
        el-table-column(prop="browseNum" label="浏览量" align="center")
        el-table-column(prop="isOpen" label="审核状态" align="center")
        el-table-column(prop="classOpen" label="开课状态" align="center")
</template>

<script type="text/ecmascript-6">
  import {moocClassURL, moocClassBtnPermissionPrefix, departmentURL, classTypeURL} from '../../config.toml'
  import {moocClassConfigBtnList} from './config'
  import KalixTable from '../../../../../components/corelib/components/common/baseTable'

  export default {
    filters: {
      ellipsis (value) {
        if (!value) return ''
        if (value.length > 8) {
          return value.slice(0, 8) + '...'
        }
        return value
      }
    },
    name: 'kalix-mplive-moocclass',
    components: {KalixTable},
    data() {
      return {
        jsonStr: '{"judgeOpen": "t"}',
        moocClassURL: moocClassURL,
        tableFields: [
          {prop: 'className', label: '课程名称'},
          {prop: 'teacher', label: '教师名称'},
          {prop: 'openTime', label: '开课日期'},
          {prop: 'department', label: '所属院系'},
          {prop: 'speciality', label: '所属专业'},
          {prop: 'classIntroduce', label: '课程简介'},
          {prop: 'teacherIntroduce', label: '教师简介'},
          {prop: 'classCover', label: '课程封面'},
          {prop: 'classType', label: '课程类别'},
          {prop: 'charge', label: '是否收费'},
          {prop: 'appraise', label: '是否评价'},
          {prop: 'recommend', label: '是否推荐'},
          {prop: 'browseNum', label: '浏览量'},
          {prop: 'isOpen', label: '审核状态'},
          {prop: 'classOpen', label: '开课状态'}
        ],
        moocClassDialog: [
          {id: 'add', dialog: 'moocClassAdd'},
          {id: 'edit', dialog: 'moocClassRecommend'},
          {id: 'openclass', dialog: 'moocClassOpen'}
        ],
        moocClassBtnList: moocClassConfigBtnList,
        buttonPermissionPrefix: moocClassBtnPermissionPrefix,
        toolbarBtnList: [
          {id: 'add', isShow: false, title: '添加', isPermission: true}
        ],
        newData: []
      }
    },
    mounted() {
      this.getDepartment()
      this.getClassType()
      this.getUser()
      setTimeout(() => {
      }, 500)
    },
    methods: {
      getDepartment() {
        this.axios.request({
          method: 'GET',
          url: departmentURL
        }).then(res => {
          this.newDataDepartment = res.data.data
        })
      },
      getClassType() {
        this.axios.request({
          method: 'GET',
          url: classTypeURL
        }).then(res => {
          this.newDataClassType = res.data.data
        })
      },
      getUser() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users'
        }).then(res => {
          this.newDataUser = res.data.data
        })
      },
      dataFormat(val) {
        let d = new Date(val)
        return this.$M_FormatDate(d, 'yyyy-MM-dd')
      },
      showMoocClassText(_data) {
        this.showMoocClass(_data)
      },
      showMoocClass(_data) {
        let data = this.$refs.kalixTable.tableData
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < this.newDataDepartment.length; j++) {
            if (data[i].specialityId === this.newDataDepartment[j].id) {
              this.$refs.kalixTable.tableData[i].speciality = this.newDataDepartment[j].name
            }
            if (data[i].departmentId === this.newDataDepartment[j].id) {
              this.$refs.kalixTable.tableData[i].department = this.newDataDepartment[j].name
            }
          }
        }
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < this.newDataClassType.length; j++) {
            if (data[i].classTypeId === this.newDataClassType[j].id) {
              this.$refs.kalixTable.tableData[i].classType = this.newDataClassType[j].name
            }
          }
        }
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < this.newDataUser.length; j++) {
            if (data[i].teacherId === this.newDataUser[j].id) {
              this.$refs.kalixTable.tableData[i].teacher = this.newDataUser[j].name
            }
          }
        }
        if (_data) {
          _data.forEach((e) => {
            e.charge = e.charge ? '是' : '否'
            e.appraise = e.appraise ? '是' : '否'
            e.recommend = e.recommend ? '是' : '否'
            if (e.isOpen === 0) {
              e.isOpen = '待审核'
            }
            if (e.isOpen === 1) {
              e.isOpen = '通过'
            }
            if (e.isOpen === 2) {
              e.isOpen = '未通过'
            }
            if (e.classOpen === 0) {
              e.classOpen = '未开课'
            }
            if (e.classOpen === 1) {
              e.classOpen = '已开课'
            }
            if (e.classOpen === 2) {
              e.classOpen = '已停课'
            }
            if (e.children) {
              this.showMoocClass(e.children)
            }
          })
        }
      }
    }
  }
</script>

<style scoped lang="stylus">

</style>
